<template>
  <div class="wrap">
    <div class="wrap__content">
      <div class="wrap__content__bg-blur" />
      <div class="wrap__content__head">
        <div class="wrap__content__head__left">
          <span class="iconfont wrap__content__head__left__icon">&#xe670;</span>
          <span class="wrap__content__head__left__text"
            >智能网联产品行业数据库</span
          >
        </div>
        <div class="wrap__content__head__right">
          <span class="iconfont wrap__content__head__right__icon"
            >&#xe72b;</span
          >
          <span class="wrap__content__head__right__text">关于数据库</span>
        </div>
      </div>
      <div class="wrap__content__form">
        <p class="wrap__content__form__title">请在下面输入你的账号和密码</p>
        <p class="wrap__content__form__first">
          <span class="wrap__content__form__first__text">个人账号: </span>
          <input
            type="text"
            class="wrap__content__form__first__username"
            placeholder="请输入"
            v-model="username"
          />
        </p>
        <p class="wrap__content__form__second">
          <span class="wrap__content__form__second__text" >登录密码: </span>
          <input
            type="password"
            class="wrap__content__form__second__password"
            placeholder="请输入"
            v-model="password"
          />
        </p>
        <button class="wrap__content__form__button" @click="login">
          登 陆
        </button>
      </div>
    </div>
  </div>
</template>
<script>
import { useRouter } from "vue-router";
import { reactive, toRefs } from "vue";
import { post } from "@/utils/request";
import { useStore } from "vuex";
//登陆相关逻辑
const useLoginEffects = () => {
  const router = useRouter();
  const store=useStore()
  const data = reactive({
    username: "",
    password: "",
  });

  const login = async () => {
    const result=await post("/login", {
      username: data.username,
      password: data.password,
    });
    // store.commit("setToken",result.token)
    localStorage.token=result.token
    router.push("/index");
  };

  const { username, password } = toRefs(data);
  return { login,username, password };
};

export default {
  setup() {
    const { login,username, password } = useLoginEffects();
    return { login,username, password };
  },
};
</script>
<style lang="scss" scoped>
@import "@/style/viriables.scss";
.wrap {
  background-color: rgba($color: #e1e3e6, $alpha: 0.4);
  &__content {
    position: relative;
    height: 100vh;
    width: 100vw;
    background: url("@/assets/img/F6174461CD8435A6A0E4560669B5018356F5F1F5_size151_w1000_h668 (1).jpeg")
      no-repeat;
    background-size: 100% 44.7rem;
    background-position-y: bottom;
    margin: 0 auto;
    background-color: #fafbfe;
    overflow: hidden;
    &__bg-blur {
      position: absolute;
      height: 44.7rem;
      width: 100%;
      bottom: 0;
      background: rgba(255, 255, 255, 0.85);
    }
    &__head {
      margin-top: 5.9rem;
      padding: 0 5.1rem;
      overflow: hidden;
      &__left {
        float: left;
        font-size: 3.8rem;
        color: $blue;
        line-height: 4.7rem;
        &__icon {
          font-size: 4.7rem;
          margin-right: 1.1rem;
        }
        &__text {
          font-weight: bold;
        }
      }
      &__right {
        float: right;
        font-size: 2rem;
        line-height: 4.7rem;
        &__icon {
          font-size: 2.4rem;
          margin-right: 0.4rem;
          position: relative;
          top: 0.2rem;
        }
      }
    }
    &__form {
      position: absolute;
      height: 39.7rem;
      width: 48.1rem;
      background-color: rgba($color: $blue, $alpha: 0.1);
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border: 0.1rem solid rgba(15, 115, 209, 100);
      text-align: center;
      &__title {
        text-align: center;
        font-size: 2.6rem;
        line-height: 5rem;
        margin-top: 3.8rem;
        font-weight: bold;
      }
      &__first {
        height: 3.8rem;
        line-height: 3.8rem;
        text-align: center;
        margin-top: 4.9rem;
        &__text {
          font-size: 2rem;
        }
        &__username {
          height: 3.5rem;
          background-color: white;
          border: 0.1rem solid gray;
          text-indent: 1em;
        }
      }
      &__second {
        height: 3.8rem;
        line-height: 3.8rem;
        text-align: center;
        margin-top: 3.1rem;
        &__text {
          font-size: 2rem;
        }
        &__password {
          height: 3.5rem;
          background-color: white;
          border: 0.1rem solid gray;
          text-indent: 1em;
        }
      }
      &__button {
        width: 26.2rem;
        height: 5rem;
        margin-top: 3rem;
        color: white;
        background-color: $blue;
        border: 0.1rem solid $light-blue;
        cursor: pointer;
        transition: 0.3s ease;
      }
      &__button:hover {
        background-color: $deep-blue;
      }
    }
  }
}
</style>